import React, {Component} from 'react'
import {connect} from 'react-redux'
import {NavBar,InputItem,Button,TextareaItem} from 'antd-mobile'
import PropTypes from 'prop-types'
import {Redirect} from 'react-router-dom'

import HeaderSelector from '../../components/header-selector/header-selector'
import {update} from '../../redux/actions'

class BossInfo extends Component {

  state = {
    header:'',
    post:'',
    info:'',
    company:'',
    salary:''
  };

  static propTypes = {
    update:PropTypes.func.isRequired
  };

  handleChange = (name, val) => {
    // 更新对应状态
    this.setState({
      [name]: val
    })
  };

  save = () => {
    this.props.update(this.state);
  };

  setHeader = (header) => {
    this.setState({
      header
    })
  };

  render() {

    const {type,header} = this.props.user;

    if(header){   //说明信息已经完善
      const path = type === '萌新' ? '/mengxin' : '/boss';
      return <Redirect to={path}/>
    }

    return(
      <div>
        <NavBar>老板信息完善</NavBar>
        <HeaderSelector setHeader={this.setHeader}/>
        <InputItem placeholder='请输入招聘职位' onChange={val => {
          this.handleChange('post', val)
        }}>招聘职位：</InputItem>
        <InputItem placeholder='请输入公司名称' onChange={val => {
          this.handleChange('company', val)
        }}>公司名称：</InputItem>
        <InputItem placeholder='请输入职位薪资' onChange={val => {
          this.handleChange('salary', val)
        }}>职位薪资：</InputItem>
        <TextareaItem placeholder='请输入职业要求' title="职业要求" rows={3} onChange={val => {
          this.handleChange('info', val)
        }}/>
        <Button type='primary' onClick={this.save}>保存</Button>
      </div>
    )
  }
}

export default connect(
    state => ({user:state.user}),
    {update}
)(BossInfo)